<h1>Home</h1>

<div class="card bg-light" style="margin-bottom: 20px;" *ngIf="isNewUser">
  <div class="card-body">
    New to TEAMMATES? You may wish to have a look at our <a href="/web/instructor/getting-started" target="_blank"
      rel="noopener noreferrer">Getting Started Guide</a>.
  </div>
</div>

<div class="row mb-3" *tmIsLoading="!hasCoursesLoaded">
  <div class="col-4 mt-auto">
    <a tmRouterLink="/web/instructor/courses" class="btn btn-success" [queryParams]="{isAddNewCourse: true}">
      <i class="fas fa-plus"></i> Add New Course
    </a>
  </div>
  <div class="col-8" *ngIf="courseTabModels.length > 0">
    <div class="float-end">
      <strong class="d-inline"> Sort By: </strong>
      <div class="btn-group" data-toggle="buttons">
        <button id="sort-course-id" class="btn btn-light" [disabled]="isSelectedForSorting(SortBy.COURSE_ID)"
          (click)="sortCoursesBy(SortBy.COURSE_ID)">Course ID</button>
        <button id="sort-course-name" class="btn btn-light" [disabled]="isSelectedForSorting(SortBy.COURSE_NAME)"
          (click)="sortCoursesBy(SortBy.COURSE_NAME)">Course Name</button>
        <button id="sort-course-date" class="btn btn-light"
          [disabled]="isSelectedForSorting(SortBy.COURSE_CREATION_DATE)"
          (click)="sortCoursesBy(SortBy.COURSE_CREATION_DATE)">Creation Date</button>
      </div>
    </div>
  </div>
</div>

<div *ngIf="isCopyingCourse" class="mb-4">
  <p>Copy Progress</p>
  <tm-progress-bar></tm-progress-bar>
</div>

<tm-loading-retry [shouldShowRetry]="hasCoursesLoadingFailed" [message]="'Something went wrong'"
  (retryEvent)="loadCourses()">
  <div *tmIsLoading="!hasCoursesLoaded || isCopyLoading">
    <div *ngIf="courseTabModels.length > 0">
      <div id="course-tab-{{ idx }}" class="card" *ngFor="let courseTabModel of courseTabModels; let idx = index">
        <div class="card-header bg-primary text-white cursor-pointer"
          (click)="courseTabModel.isTabExpanded = handleClick($event, courseTabModel); this.loadFeedbackSessions(idx);">
          <b class="course-details text-break">[{{ courseTabModel.course.courseId }}]: {{
            courseTabModel.course.courseName }}</b>
          <div class="card-header-btn-toolbar flex-lg-shrink-0" *ngIf="courseTabModel.isAjaxSuccess">
            <span ngbDropdown container="body">
              <button type="button" class="btn btn-primary btn-sm" ngbDropdownToggle> Students </button>
              <div ngbDropdownMenu (click)="$event.stopPropagation()">
                <ng-container *ngIf="courseTabModel.instructorPrivilege.canModifyStudent">
                  <a class="btn btn-light btn-sm dropdown-item" tmRouterLink="/web/instructor/courses/enroll"
                    [queryParams]="{courseid: courseTabModel.course.courseId}"> Enroll
                  </a>
                </ng-container>
                <a class="btn btn-light btn-sm dropdown-item" tmRouterLink="/web/instructor/courses/details"
                  [queryParams]="{courseid: courseTabModel.course.courseId}"> View / Edit
                </a>
              </div>
            </span>
            <span ngbDropdown container="body">
              <button type="button" class="btn btn-primary btn-sm" ngbDropdownToggle> Instructors </button>
              <div ngbDropdownMenu (click)="$event.stopPropagation()">
                <a class="btn btn-light btn-sm dropdown-item" tmRouterLink="/web/instructor/courses/edit"
                  [queryParams]="{courseid: courseTabModel.course.courseId}"> View / Edit
                </a>
              </div>
            </span>
            <span ngbDropdown container="body">
              <button type="button" class="btn btn-primary btn-sm" ngbDropdownToggle> Sessions </button>
              <div ngbDropdownMenu (click)="$event.stopPropagation()">
                <a class="btn btn-light btn-sm dropdown-item" tmRouterLink="/web/instructor/sessions"
                  [queryParams]="{courseid: courseTabModel.course.courseId}"> Add
                </a>
              </div>
            </span>
            <span ngbDropdown container="body">
              <button type="button" class="btn-course btn btn-primary btn-sm" ngbDropdownToggle> Course </button>
              <div ngbDropdownMenu (click)="$event.stopPropagation()">
                <a class="btn-archive-course btn btn-light btn-sm dropdown-item"
                  ngbTooltip="Archive the course so that it will not be shown in the home page any more (you can still access it from the 'Courses' tab)"
                  (click)="archiveCourse(courseTabModel.course.courseId)"
                  tmRouterLink="./"> Archive
                </a>
                <a class="btn btn-light btn-sm dropdown-item" tmRouterLink='/web/instructor/courses/edit'
                  [queryParams]="{courseid: courseTabModel.course.courseId}"> View / Edit
                </a>
                <ng-container *ngIf="courseTabModel.instructorPrivilege.canModifyCourse">
                  <a class="btn-copy-course btn btn-light btn-sm dropdown-item"
                    ngbTooltip="Copy the course and its corresponding sessions"
                    (click)="!isCopyingCourse && onCopy(courseTabModel.course.courseId, courseTabModel.course.courseName, courseTabModel.course.timeZone)"
                    tmRouterLink="./"> Copy
                  </a>
                </ng-container>
                <ng-container *ngIf="courseTabModel.instructorPrivilege.canModifyInstructor && courseTabModel.course.isMigrated">
                  <a class="btn-course-logs btn btn-light btn-sm dropdown-item" tmRouterLink="/web/instructor/courses/student-activity-logs"
                  [queryParams]="{courseid: courseTabModel.course.courseId}"> View Logs
                  </a>
                </ng-container>
                <ng-container *ngIf="courseTabModel.instructorPrivilege.canModifyCourse">
                  <a class="btn-delete-course btn btn-light btn-sm dropdown-item"
                    ngbTooltip="Delete the course and its corresponding students and sessions"
                    (click)="deleteCourse(courseTabModel.course.courseId)"
                    tmRouterLink="./"> Delete
                  </a>
                </ng-container>
              </div>
            </span>
            <tm-panel-chevron [isExpanded]="courseTabModel.isTabExpanded"></tm-panel-chevron>
          </div>
        </div>
        <div class="card-body padding-0 table-responsive" *ngIf="courseTabModel.isTabExpanded" @collapseAnim>
          <tm-loading-retry [shouldShowRetry]="courseTabModel.hasLoadingFailed"
            [message]="'Error loading feedback sessions'" (retryEvent)="loadFeedbackSessions(idx)">
            <tm-sessions-table *tmIsLoading="!courseTabModel.hasPopulated"
              [sessionsTableRowModels]="courseTabModel.sessionsTableRowModels"
              id = "sessions-table-{{ idx }}"
              [initialSortBy]="initialSortBy"
              [sortOrder]="sortOrder"
              [courseCandidates]="courseCandidates"
              [headerColorScheme]="SortableTableHeaderColorScheme.WHITE"
              [columnsToShow]="[
                SessionsTableColumn.START_DATE,
                SessionsTableColumn.END_DATE
              ]"
              [isSendReminderLoading]="isSendReminderLoading"
              (sortSessionsTableRowModelsEvent)="sortSessionsTableRowModelsEvent(idx, $event)"
              (loadResponseRateEvent)="loadResponseRateEventHandler(idx, $event)"
              (moveSessionToRecycleBinEvent)="moveSessionToRecycleBinEventHandler(idx, $event)"
              (copySessionEvent)="copySessionEventHandler(idx, $event)"
              (submitSessionAsInstructorEvent)="submitSessionAsInstructorEventHandler(idx, $event)"
              (publishSessionEvent)="publishSessionEventHandler(idx, $event)"
              (unpublishSessionEvent)="unpublishSessionEventHandler(idx, $event)"
              (downloadSessionResultsEvent)="downloadSessionResultEventHandler(idx, $event)"
              (resendResultsLinkToStudentsEvent)="resendResultsLinkToRespondentsEventHandler(courseTabModel.sessionsTableRowModels[$event])"
              (sendRemindersToAllNonSubmittersEvent)="sendRemindersToRespondentsEventHandler(courseTabModel.sessionsTableRowModels[$event], true)"
              (sendRemindersToSelectedNonSubmittersEvent)="sendRemindersToRespondentsEventHandler(courseTabModel.sessionsTableRowModels[$event], false)"></tm-sessions-table>
          </tm-loading-retry>
        </div>
      </div>
    </div>
  </div>
</tm-loading-retry>

<ng-template #modifiedTimestampsModal>
  <tm-modified-timestamps-modal [coursesOfModifiedSession]="this.coursesOfModifiedSession"
    [modifiedSessions]="this.modifiedSession">
  </tm-modified-timestamps-modal>
</ng-template>
